<template>
	<view class="wrap">
		<image class="bg" :src="backgroundImageUrl" mode="heightFix"></image>
		<!-- 头部标题及筛选按钮 -->
		<view class="navi-topTitle">
			<text class="left-offset" style="font-size: 40rpx;">{{title}}</text>
			<text @click="handleFilter" class="left-offset" style="font-size: 24rpx;">[筛选]</text>
		</view>
		<!-- 搜索框 -->
		<view class="navi-search">
			<u-search :placeholder="placeholder" v-model="value" :show-action="false" @change="searchChange" @search="searchDidFinish"></u-search>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				value : ''
			}
		},
		
		name: 'lrNavigationBar',
		props: {
			//标题
			title: '',
			//背景图片的url
			backgroundImageUrl: '',
			//搜索框的占位文字
			placeholder: '',
		},
		methods: {
			//搜索完成
			searchDidFinish(value) {
               this.$emit('searchDidFinish', value);
			},
			//搜索框内容发生改变
			searchChange(value) {
				this.$emit('searchChange', value);
			},
			//筛选按钮的点击事件
			handleFilter() {
               console.log('点击了筛选');
			   this.$emit('handleFilter');
			   
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		background-color: $xz-bgColor-blue;
		width: 100%;
		height: 300rpx;
		
		.bg {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			height: 300rpx;
		}
		
		.navi-topTitle {
			position: relative;
			margin-top: 95rpx;
		}
		
		.navi-search {
			position: relative;
			height: 72rpx;
			margin: 50rpx 20rpx;
			
		}
	}
	
	text{
		color: $xz-textColor-FF;
		margin-left: 20rpx;
	}
	
	
	
</style>
